<template>
  <el-row v-loading="loading">
    <el-col :span="24">
      <reporttouploadEdit
        ref="reporttouploadEdit"
        v-on:save-finished="getReportList()"
      ></reporttouploadEdit>
      <el-row class="search-row">
        <el-col :span="12">
          <el-input
            placeholder="档案号/姓名/手机号"
            size="small"
            v-model="search.name"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getReportList()"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="r_ReportToUploadList"
            border
            size="mini"
            header-cell-class-name="header-row"
          >
            <el-table-column
              align="center"
              prop="orderdate"
              label="体验时间"
              header-align="center"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="hMemberofthefile.hFn"
              label="档案号"
              header-align="center"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="hMemberofthefile.hName"
              label="姓名"
              header-align="center"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="hMemberofthefile.hPhone"
              label="手机号码"
              header-align="center"
            ></el-table-column>
            <el-table-column
              align="center"
              prop="setmeal.name"
              label="检测套餐"
              header-align="center"
            ></el-table-column>
            <el-table-column
              align="center"
              :formatter="stateFormat"
              label="报告状态"
              prop="tstatic"
              header-align="center"
            ></el-table-column>
            <el-table-column
              label="操作"
              header-align="center"
              align="center"
              width="260"
            >
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleEditResource(scope.$index, scope.row)"
                  >上传报告</el-button
                >
                <el-button
                  type="danger"
                  size="mini"
                  @click="handleDeleteReport(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[5, 10, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="ReportTotal"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<!-- 体验上传 -->
<script>
import { listTOrder, getTOrderById, removeTOrder } from "@/api/RReporttoupload";
import reporttouploadEdit from "@/components/ReportToUpload/ReportToUploadEdit";

export default {
  data() {
    return {
      loading: false,
      search: {
        offset: 1,
        limit: 5,
        name: "",
      },
      ReportTotal: 0,
      r_ReportToUploadList: [],
    };
  },
  methods: {
    async pageInit() {
      this.loading = true;
      this.getReportList();
    },
    //查询
    getReportList() {
      this.loading = true;
      listTOrder(this.search)
        .then((response) => {
          this.ReportTotal = response.data.total;
          this.r_ReportToUploadList = response.data.rows;
          this.loading = false;
        })
        .catch((error) => {
          console.log(error);
          this.loading = false;
        });
    },
    //添加模态框
    handleCreateReport() {
      this.$refs.reporttouploadEdit.$emit("openAddReportDialog");
    },
    //修改前查询
    handleEditResource(index, row) {
      this.loading = true;
      getTOrderById(row.id)
        .then((response) => {
          this.$refs.reporttouploadEdit.$emit(
            "opendEitReportDialog",
            response.data
          );
          this.loading = false;
        })
        .catch((error) => {
          this.outputError(error);
        });
    },
    stateFormat(row, column) {
      if (row.tstatic == 0) {
        return "报告未上传";
      } else {
        return "报告已上传";
      }
    },
    handleSizeChange(val) {
      this.search.limit = val;
      this.search.offset = 1;
      this.getReportList();
    },
    handleCurrentChange(val) {
      this.search.offset = val;
      this.search.currentPage = val;
      this.getReportList();
    },
    //删除
    handleDeleteReport(index, row) {
      this.$confirm("确定删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.loading = true;
          removeTOrder(row.id)
            .then((response) => {
              this.loading = false;
              this.getReportList();
              this.$message({
                message: "删除成功",
                type: "success",
              });
            })
            .catch((error) => {
              this.outputError(error);
            });
        })
        .catch(() => {});
    },

    outputError(error) {
      console.log(error.response ? error.response : error.message);
      this.loading = false;
      this.$message({
        showClose: true,
        message: "出错了，请按F12查看浏览器日志。",
        type: "error",
      });
    },
  },
  components: { reporttouploadEdit },
  created() {
    this.pageInit();
  },
};
</script>

<style lang="scss" scoped>
.search-row {
  padding-bottom: 8px;
  .el-input {
    width: 260px;
  }
}

.Report-locked {
  color: red;
}
.Report-not-locked {
  color: green;
}
</style>